<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="item of headerList"
        :key="item.type"
        :label="item.name+'('+item.count+')'"
        :name="item.type +''"
      ></el-tab-pane>
    </el-tabs>
    <div>
      <kw16superTable 
      :isexpand ="true"
      :currentPage="currentPage"
      @CurrentChange="CurrentChange"
      @SizeChange="SizeChange"
      :total="total"
      :headerData="headerData" 
      :tableData="tableData"
      :border="false"
      >
        <template v-slot:formSlot>
          <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="商品分类：">
                <el-cascader
                  clearable
                  :props='{value:"id",label:"name",children:"child"}'
                  v-model="formInline.classfly"
                  :options="options"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="商品搜索:">
                <el-input v-model="formInline.searchValue">
                  <el-button 
                  slot="append" 
                  icon="el-icon-search"
                  @click="storeproductlistFn()"
                  ></el-button>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template v-slot:image="{row}">
           <el-image 
           class="shopimage" 
           :src="row.image"
            :preview-src-list="[row.image]"
           ></el-image>
        </template>
        <template v-slot:addTime="{row}">
           {{row.addTime | formatDate}}
        </template>
        <template v-slot:isShow="{row}">
          <div class="shopisshow">
              <span v-if="row.isShow">上架</span>
              <span v-if="!row.isShow">下架</span>
              <el-switch 
              disabled
              v-model="row.isShow"></el-switch>
          </div>
        </template>
        <template v-slot:operationBtn="{operationData}">
            <div>
                <el-button type="text">编辑</el-button>
                <el-button type="text">详情</el-button>
                 <el-button type="text" @click="JoinRecycleBin(operationData.id)">加入回收站</el-button>
            </div>
        </template>
        <template v-slot:btnSlot>
            <div>
              <el-button v-if="userid==1" @click="addStore()">新增</el-button>
                <el-button @click="derive()">导出<i class="el-icon-upload2 el-icon--left"></i></el-button>
            </div>
        </template>
        <template v-slot:expandBox="{row}">
                <el-descriptions >
                    <el-descriptions-item label="商品分类">{{row.cateValues}}</el-descriptions-item>
                    <el-descriptions-item label="市场价">{{row.otPrice}}</el-descriptions-item>
                    <el-descriptions-item label="收藏">{{row.collectCount}}</el-descriptions-item>
                    <el-descriptions-item label="虚拟销量">{{row.ficti}}</el-descriptions-item>
                    <el-descriptions-item label="成本价">{{row.cost}}</el-descriptions-item>
                </el-descriptions>
        </template>
      </kw16superTable>
    </div>
  </div>
</template>
<script>
import kw16superTable from "@/components/kw16superTable";
import { GetCookie}  from "@/config/config";
import {
  producttabsheaders,
  storeproductlist,
  categorylisttree,
  exportexcelproduct,
  storeproductdelete
} from "@/api/shop";
export default {
  name: "storeindex",
  data() {
    return {
      userid:GetCookie("id"),
        limit:10,
      formInline: {
        classfly: [],
        searchValue: ""
      },
      headerData:[
        {
            prop:"id",
            label:"ID",
            width:"180"
        },
        {
            prop:"image",
            label:"商品图",
            width:"180",
            slot:true
        },
        {
            prop:"storeName",
            label:"商品名称",
            width:"180",
            nocenter:true
        },
        {
            prop:"price",
            label:"商品售价",
            width:"180"
        },
        {
            prop:"sales",
            label:"销量",
            width:"180"
        },
        {
            prop:"stock",
            label:"库存",
            width:"180"
        },
        {
            prop:"sort",
            label:"排序",
            width:"180"
        },
        {
            prop:"addTime",
            label:"添加时间",
            width:"180",
             slot:true
        },
        {
            prop:"isShow",
            label:"状态",
            width:"180",
            slot:true
        },
      ],
      currentPage:1,
      total:0,
      options: [],
      activeName: "",
      headerList: [],
      tableData:[],
      cateId:"",
    };
  },
  filters:{
    formatDate(time){
        console.log(time)
        console.log("1")
        if(time){
            let timeDay = new Date(time *1000);
            return timeDay.getFullYear()+
                  "-"+
                  (timeDay.getMonth()+1)+
                  "-"+
                  timeDay.getDate()+
                  " "+
                  timeDay.getHours()+
                  ":"+
                  timeDay.getMinutes()

        }
    }
  },
  methods: {
    // 新增
    addStore(){
      let _self = this;
      _self.$router.push("/store/add")
    },
    // 删除回收站
    JoinRecycleBin(id){
      console.log(id)
      let _self= this;
      _self.$confirm(`确定删除id为${id}的商品`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let data = {id};
            storeproductdelete(data).then(res=>{
              // console.log(res)
              if(res.code ==200){
                _self.$message("删除成功")
                 _self.currentPage=1;
                 _self.storeproductlistFn()
              }else{
                _self.$message("删除失败")
              }
            })
        }).catch(() => {
                  
        });
    

    },
    // 头部的切换
    handleClick(tab) {
      console.log(tab.name);
      let _self = this;
      _self.activeName = tab.name;
      _self.storeproductlistFn();
    },
    // 商品的头部
    async producttabsheadersFn() {
      let _self = this;
      await producttabsheaders().then(res => {
        console.log(res);
        if (res.code == 200) {
          _self.headerList = res.data;
          _self.activeName = res.data[0].type + "";
        }
      });
    },
    // 分类下拉
    async categorylisttreeFn() {
      let _self = this;
      let data = {
        status: -1,
        type: 1
      };
      await categorylisttree(data).then(res => {
        console.log();
        _self.options = res.data;
      });
    },
    // 查列表
    async storeproductlistFn() {
      let _self = this;
      let data = {
        cateId: _self.cateId,
        keywords: _self.formInline.searchValue,
        limit: _self.limit,
        page: _self.currentPage,
        type: _self.activeName * 1
      };
      console.log(data);
      storeproductlist(data).then(res => {
        console.log(res);
        _self.tableData = res.data.list;
        _self.total = res.data.total;
      });
    },
      // 切换当前第几页
    CurrentChange(val) {
      let _self = this;
      console.log(val); //当前第几页
      _self.currentPage = val;
      _self.storeproductlistFn();
    },
    // 切换一页多少条
    SizeChange(val) {
      console.log(val); //一页多少条
      let _self = this;
      _self.limit = val;
      _self.storeproductlistFn();
    },
    // 分类的选择
     handleChange(value) {
        console.log(value);
        let _self = this;
        if(value.length==2){
            _self.cateId = value[1];
            _self.currentPage=1;
        }else{
            _self.cateId = "";
             _self.currentPage=1;
        }
        _self.storeproductlistFn()
    },
    
    // 导出
    derive(){
        let _self = this;
        let data ={
            cateId: _self.cateId,
            keywords: _self.formInline.searchValue,
            type: _self.activeName * 1
        }
        exportexcelproduct(data).then(res=>{
            console.log(res)
            if(res.code == 200){
                window.location.href = res.data.fileName
            }
        })

    }
  },
  components: {
    kw16superTable
  },
  async mounted() {
    let _self = this;
    // 必须先等头部数据返回 拿到数据里面第一个对象的type
    await _self.producttabsheadersFn();
    // 必须拿到分类数据
    await _self.categorylisttreeFn();
    // 再请求列表数据
    await _self.storeproductlistFn();
  }
};
</script>
<style >
    .shopimage{
        width: 50px;
        height: 50px;
    }
    .shopisshow{
        position: relative;
    }
    .shopisshow>span{
        position: absolute;
        z-index: 1;
        left: 68px;
        top: 2px;
        color: #fff;
        font-size: 12px;
    }
    .shopisshow .el-switch__core{
            width: 70px !important;
    }
</style>